scrapboxのnav barを調べる

DOM

code:navbar.html

<nav class="navbar navbar-default">

<div class="container">

<div class="row">

<div class="col-brand dropdown global-menu-button">

<a class="navbar-brand dropdown-toggle" data-toggle="dropdown" role="button" tabindex="0" aria-haspopup="true" aria-expanded="false">

<img class="brand-icon" src="/assets/img/logo.png">

<span class="kamon kamon-caret-down"></span>

</a>

<ul>...</ul>

</div>

<div class="col-search hidden-xs">

<div class="navbar-form">

<a class="new-button" href="/takker/new" rel="route" title="New">

<div class="horizontal-line"></div>

<div class="vertical-line"></div>

</a>

<form class="search-form" role="search">

<div class="form-group">

<div class="dropdown">

<input type="text" class="form-control" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" value="">

<ul class="dropdown-menu" role="menu" style="max-height: 11em; max-width: 100%; overflow: auto;"></ul>

</div>

<button tabindex="-1" type="submit" class="">...</button>

</div>

</form>

</div>

</div>

<div class="col-menu">

<ul class="navbar-menu">

<li class="stream-btn hidden-xs">...</li>

<li class="visible-xs">

<a class="mobile-search-toggle">

<i class="kamon kamon-search"></i>

</a>

</li>

</ul>

</div>

</div>

</div>

</nav>

.navbar

下の要素との余白を決めている

.navbar-default

.navbar > .container

margin-bottomってなんだ？

.navbar .row

global menuからstreamボタンとかの部分

左右の余白をなくす

.navbar .row .col-search

.navbar .row .col-menu